<template>
  <div class="logincover">
    <div class="number">
      <img src="../assets/images/number.png" alt="" />
      <div class="numberinput">
        <input type="number" name="" id="" />
      </div>
    </div>
    <div class="code">
      <img src="../assets/images/code.png" alt="" />
      <img
              src="../assets/images/getcode.png"
              style="z-index:100;"
              alt=""
              v-if="isShow"
      />
      <img
        class="getCode"
        src="../assets/images/getcode.png"
        style="z-index:100;"
        alt=""
        v-if="isShow"
        @click="getCode"
      />
      <img src="../assets/images/time.png" alt="" v-else />
      <div class="box" style="z-index:99">
        <div class="codeinput">
          <input type="text" placeholder="请输入验证码" />
        </div>
        <div class="timeinput" v-if="!isShow">
          <input type="text" />
        </div>
      </div>
    </div>

    <div class="sure">
      <img src="../assets/images/sure.png" alt="" />
    </div>
  </div>
</template>
<script>
export default {
  name: "login",
  data() {
    return {
      isShow: true,
    };
  },
  methods: {
    getCode() {
      this.isShow = false;
      console.log(111111);
    },
  },
};
</script>

<style scoped>
.logincover {
  width: 100%;
  height: 100vh;
  background-image: url("../assets/images/loginpage.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  text-align: center;
}
.logincover > div {
  box-sizing: border-box;
}
.number {
  position: relative;
  width: 100%;
  padding-top: 48vh;
}
.number > img {
  width: 51vw;
  height: 5vh;
}
.numberinput {
  width: 100%;
  position: absolute;
  top: 48.1vh;
}
.numberinput > input {
  width: 49vw;
  height: 4.5vh;
  border: 0;
  outline: 0;
  background-color: transparent;
}
.code {
  padding-top: 1vh;
  width: 100%;
  position: relative;
 
}
.code > img {
  margin: 0 1vw;
  width: 25vw;
  height: 5vh;
}

.getCode{
  position: absolute;
  right: 23vw;
}

.sure {
  width: 100%;
  position: relative;
  padding-top: 4vh;
}
.sure > img {
  width: 28vw;
  height: 5vh;
}
.box {
  position: absolute;
  top: 1vh;
  width: 100%;
  display: flex;
  height: 5vh;
}
.codeinput {
  position: relative;
  left:24.5vw;
}
.timeinput {
  position: relative;
  right: -27.5vw;
}
.codeinput > input,
.timeinput > input {
  width: 23vw;
  height: 4.5vh;
  border: 0;
  outline: 0;
  background-color: transparent;
}
</style>